﻿<template>
    <div class="l-rblock l-form-viewer" style="padding:8px;">
        <el-form
            :model="formData"
            :rules="rules"
            size="mini"
            labelPosition="right"
            labelWidth="80px"
            ref="form"
            >
            <div class="l-auto-window ">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane class="l-tabs-container" :label="$t('主表信息')" name="tab0">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col :span="24" v-if="lr_formLookAuth('1649207155235_68553')"  >
                                <el-card header="卡片布局" shadow="" >
                                <el-col v-if="lr_formLookAuth('f_parent_f_text')" :span="24" >
                                    <el-form-item 
                                        label="单行文本" 
                                        prop="f_parent_f_text"
                                        > 
                                        <el-input :disabled="!lr_formEditAuth('f_parent_f_text')" v-model="formData.f_parent_f_text" :placeholder="$t('请输入')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_textarea')" :span="24" >
                                    <el-form-item 
                                        label="多行文本" 
                                        prop="f_parent_f_textarea"
                                        > 
                                        <el-input type="textarea"  :disabled="!lr_formEditAuth('f_parent_f_textarea')" v-model="formData.f_parent_f_textarea" :placeholder="$t('请输入')" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_edit')" :span="24" >
                                    <el-form-item 
                                        label="编辑器" 
                                        prop="f_parent_f_edit"
                                        > 
                                        <l-editor :disabled="!lr_formEditAuth('f_parent_f_edit')" v-model="formData.f_parent_f_edit" :options="{ theme:'snow',placeholder: $t('请输入内容...')}"  />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_Num')" :span="24" >
                                    <el-form-item 
                                        label="计数器" 
                                        prop="f_parent_f_Num"
                                        > 
                                        <el-input-number  :disabled="!lr_formEditAuth('f_parent_f_Num')" controlsPosition="default" v-model="formData.f_parent_f_Num" :placeholder="$t('请输入')" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_password')" :span="24" >
                                    <el-form-item 
                                        label="密码" 
                                        prop="f_parent_f_password"
                                        > 
                                        <el-input type="password"  :disabled="!lr_formEditAuth('f_parent_f_password')" v-model="formData.f_parent_f_password" :placeholder="$t('请输入')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                </el-card>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane class="l-tabs-container" :label="$t('新建选项卡1')" name="tab1">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col v-if="lr_formLookAuth('f_parent_f_radio')" :span="24" >
                                    <el-form-item 
                                        label="单选框组" 
                                        prop="f_parent_f_radio"
                                        > 
                                        <l-radio :disabled="!lr_formEditAuth('f_parent_f_radio')" @change="f_parent_f_radio_change" :options="f_parent_f_radioOptions" v-model="formData.f_parent_f_radio" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_checkbox')" :span="24" >
                                    <el-form-item 
                                        label="多选框组" 
                                        prop="f_parent_f_checkbox"
                                        > 
                                        <l-checkbox :disabled="!lr_formEditAuth('f_parent_f_checkbox')"  :options="f_parent_f_checkboxOptions" v-model="formData.f_parent_f_checkbox" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_select')" :span="24" >
                                    <el-form-item 
                                        label="下拉选择" 
                                        prop="f_parent_f_select"
                                        > 
                                        <l-select :disabled="!lr_formEditAuth('f_parent_f_select')"  :options="f_parent_f_selectOptions" v-model="formData.f_parent_f_select" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_select2')" :span="24" >
                                    <el-form-item 
                                        label="下拉多选" 
                                        prop="f_parent_f_select2"
                                        > 
                                        <l-select :disabled="!lr_formEditAuth('f_parent_f_select2')"  :multiple="true" :options="f_parent_f_select2Options" v-model="formData.f_parent_f_select2" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_treeSelect')" :span="24" >
                                    <el-form-item 
                                        label="树形选择" 
                                        prop="f_parent_f_treeSelect"
                                        > 
                                        <l-tree-select :disabled="!lr_formEditAuth('f_parent_f_treeSelect')"  :options="f_parent_f_treeSelectOptions" v-model="formData.f_parent_f_treeSelect" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_layerSelect')" :span="24" >
                                    <el-form-item 
                                        label="弹窗选择" 
                                        prop="f_parent_f_layerSelect"
                                        > 
                                        <l-layer-select 
                                          :disabled="!lr_formEditAuth('f_parent_f_layerSelect')" 
                                          :isPage="true"
                                          :height="504"
                                          :width="960"
                                          :columns="[{'label':'第0列','prop':'f_ItemValue','valueKey':'','width':100,'align':'left','hidden':false}]"
                                          :options="f_parent_f_layerSelectOptions" 
                                          v-model="formData.f_parent_f_layerSelect"
                                          
                                       />
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane class="l-tabs-container" :label="$t('新建选项卡2')" name="tab2">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col v-if="lr_formLookAuth('f_parent_f_time')" :span="24" >
                                    <el-form-item 
                                        label="时间选择" 
                                        prop="f_parent_f_time"
                                        > 
                                        <l-time   :disabled="!lr_formEditAuth('f_parent_f_time')" format="HH:mm:ss" :clearable="true" v-model="formData.f_parent_f_time" :placeholder="$t('请选择')" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_time2')" :span="24" >
                                    <el-form-item 
                                        label="时间范围" 
                                        prop="f_parent_f_time2"
                                        > 
                                        <l-time isRange  :disabled="!lr_formEditAuth('f_parent_f_time2')" format="HH:mm:ss" :clearable="true" v-model="formData.f_parent_f_time2" :startPlaceholder="$t('开始时间')" :endPlaceholder="$t('结束时间')" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_date')" :span="24" >
                                    <el-form-item 
                                        label="日期选择" 
                                        prop="f_parent_f_date"
                                        > 
                                        <l-date  :disabled="!lr_formEditAuth('f_parent_f_date')" format="yyyy-MM-dd" dateType="date" :clearable="true" v-model="formData.f_parent_f_date" :placeholder="$t('请选择')" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_daterange')" :span="24" >
                                    <el-form-item 
                                        label="日期范围" 
                                        prop="f_parent_f_daterange"
                                        > 
                                        <l-date  :disabled="!lr_formEditAuth('f_parent_f_daterange')" format="yyyy-MM-dd" dateType="daterange" :clearable="true" v-model="formData.f_parent_f_daterange" :startPlaceholder="$t('开始时间')" :endPlaceholder="$t('结束时间')" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_areaSelect')" :span="24" >
                                    <el-form-item 
                                        label="省市区" 
                                        prop="f_parent_f_areaSelect"
                                        > 
                                        <l-area-select :disabled="!lr_formEditAuth('f_parent_f_areaSelect')" v-model="formData.f_parent_f_areaSelect" :placeholder="$t('请选择')" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_map')" :span="24" >
                                    <el-form-item 
                                        label="地图选择" 
                                        prop="f_parent_f_map"
                                        > 
                                        <l-BMap-select :height="504" :width="960" size="mini" v-model="formData.f_parent_f_map" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_file')" :span="24" >
                                    <el-form-item 
                                        label="文件上传" 
                                        prop="f_parent_f_file"
                                        > 
                                        <l-upload :disabled="!lr_formEditAuth('f_parent_f_file')" v-model="formData.f_parent_f_file" :placeholder="$t('请输入')" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_img')" :span="24" >
                                    <el-form-item 
                                        label="图片上传" 
                                        prop="f_parent_f_img"
                                        > 
                                        <l-upload :disabled="!lr_formEditAuth('f_parent_f_img')" v-model="formData.f_parent_f_img" listType="picture-card" :placeholder="$t('请输入')" />
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane class="l-tabs-container" :label="$t('新建选项卡3')" name="tab3">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col v-if="lr_formLookAuth('f_parent_f_company')" :span="24" >
                                    <el-form-item 
                                        label="公司选择" 
                                        prop="f_parent_f_company"
                                        > 
                                        <l-company-select :disabled="!lr_formEditAuth('f_parent_f_company')"  v-model="formData.f_parent_f_company" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_department')" :span="24" >
                                    <el-form-item 
                                        label="部门选择" 
                                        prop="f_parent_f_department"
                                        > 
                                        <l-department-select :disabled="!lr_formEditAuth('f_parent_f_department')"  v-model="formData.f_parent_f_department" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_user')" :span="24" >
                                    <el-form-item 
                                        label="人员选择" 
                                        prop="f_parent_f_user"
                                        > 
                                        <l-user-select :disabled="!lr_formEditAuth('f_parent_f_user')"  v-model="formData.f_parent_f_user" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-show="false" :span="24" >
                                    <el-form-item 
                                        label="所属公司" 
                                        prop="f_parent_f_ccompany"
                                        > 
                                        <l-company v-model="formData.f_parent_f_ccompany" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-show="false" :span="24" >
                                    <el-form-item 
                                        label="所属部门" 
                                        prop="f_parent_f_cdepartment"
                                        > 
                                        <l-department v-model="formData.f_parent_f_cdepartment" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-show="false" :span="24" >
                                    <el-form-item 
                                        label="创建人员" 
                                        prop="f_parent_f_cuser"
                                        > 
                                        <l-createuser v-model="formData.f_parent_f_cuser" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-show="false" :span="24" >
                                    <el-form-item 
                                        label="创建时间" 
                                        prop="f_parent_f_cdate"
                                        > 
                                        <l-createtime v-model="formData.f_parent_f_cdate" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-show="false" :span="24" >
                                    <el-form-item 
                                        label="修改人员" 
                                        prop="f_parent_f_muser"
                                        > 
                                        <l-createtime  v-model="formData.f_parent_f_muser" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-show="false" :span="24" >
                                    <el-form-item 
                                        label="修改时间" 
                                        prop="f_parent_f_mdate"
                                        > 
                                        <l-modifytime v-model="formData.f_parent_f_mdate" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_code')" :span="24" >
                                    <el-form-item 
                                        label="单据编码" 
                                        prop="f_parent_f_code"
                                        > 
                                        <l-code size="mini" code="csbm" v-model="formData.f_parent_f_code" />
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane class="l-tabs-container" :label="$t('新建选项卡4')" name="tab4">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col v-if="lr_formLookAuth('1649207427046_59544')"  :span="24" >
                                    <div class="l-title" >{{$t('视图表格')}}</div>
                                    <l-view-table
                                    :paramFiled="formData.f_parent_f_Id"
                                    :columns="[{'label':'第0列','prop':'table_name','width':100,'align':'left','hidden':false},{'label':'第1列','prop':'tablepkey','width':100,'align':'left','hidden':false}]"
                                    code="formHistory"
                                    />
                                </el-col>
                                <el-col v-show="false" :span="24" >
                                    <el-form-item 
                                        label="GUID主键" 
                                        prop="f_parent_f_Id"
                                        > 
                                        <l-guid size="mini" v-model="formData.f_parent_f_Id" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('1649207465797_87651')" :span="24" >
                                    <el-form-item  labelWidth="0px">
                                        <el-button
                                             size="mini" 
                                             :plain="false"
                                             :round="false" 
                                             :circle="false" 
                                             icon="" 
                                             type=""

                                             :disabled="!lr_formEditAuth('1649207465797_87651')"
            
                                             >按钮组件</el-button>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_icon')" :span="24" >
                                    <el-form-item 
                                        label="图标" 
                                        prop="f_parent_f_icon"
                                        > 
                                        <l-input-icon :disabled="!lr_formEditAuth('f_parent_f_icon')" v-model="formData.f_parent_f_icon" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_rate')" :span="24" >
                                    <el-form-item 
                                        label="评分" 
                                        prop="f_parent_f_rate"
                                        > 
                                        <el-rate  :disabled="!lr_formEditAuth('f_parent_f_rate')" :max="5" :lowThreshold="2" :highThreshold="4" voidColor="#C6D1DE" disabledVoidColor="#EFF2F7" textColor="#1F2D3D" voidIconClass="el-icon-star-off" disabledVoidIconClass="el-icon-star-on" :allowHalf="false" :showText="false" :showScore="false" :colors="['#F7BA2A','#F7BA2A','#F7BA2A']" :iconClasses="['el-icon-star-on','el-icon-star-on','el-icon-star-on']" :texts="['极差','失望','一般','满意','惊喜']" v-model="formData.f_parent_f_rate" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_swtich')" :span="24" >
                                    <el-form-item 
                                        label="开关" 
                                        prop="f_parent_f_swtich"
                                        > 
                                        <el-switch  :disabled="!lr_formEditAuth('f_parent_f_swtich')" :activeValue="1" :inactiveValue="0" v-model="formData.f_parent_f_swtich" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_swtich2')" :span="24" >
                                    <el-form-item 
                                        label="滑块" 
                                        prop="f_parent_f_swtich2"
                                        > 
                                        <el-slider  :disabled="!lr_formEditAuth('f_parent_f_swtich2')" :min="0" :max="100" :step="1" :showStops="false" :showInput="false" :showInputControls="true" :showTooltip="true" v-model="formData.f_parent_f_swtich2" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('f_parent_f_color')" :span="24" >
                                    <el-form-item 
                                        label="颜色选择" 
                                        prop="f_parent_f_color"
                                        > 
                                        <l-input-color :disabled="!lr_formEditAuth('f_parent_f_color')" v-model="formData.f_parent_f_color" />
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane class="l-tabs-container" :label="$t('新建选项卡5')" name="tab5">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col v-if="lr_formLookAuth('1649215909690_96411')" :span="24" >
                                    <div class="l-title" >{{$t('设计子表')}}</div>
                                    <l-edit-table
                                        ref="f_children_table"
                                        addBtnText="新增一行"
                                        :isAddBtn="true"
                                        :isRemoveBtn="true"
                                        :isShowNum="true"
                                        :dataSource="f_children_data"
                                        :columns="lr_formTableAuth('f_children',f_children_columns)"
                                        @addRow="handleF_childrenAddRow"
                                        @deleteRow="handleF_childrenDeleteRow"
                                        >
                                        <template v-slot:f_text="scope" >
                                            <el-input size="mini"  :disabled="!lr_formTableEditAuth('f_children','f_text')" v-model="scope.row.f_text" :placeholder="$t('请输入')" >
                                            </el-input>
                                        </template>
                                        <template v-slot:f_textarea="scope" >
                                            <el-input size="mini" type="textarea"  :disabled="!lr_formTableEditAuth('f_children','f_textarea')" v-model="scope.row.f_textarea" :placeholder="$t('请输入')" />
                                        </template>
                                        <template v-slot:f_Num="scope" >
                                            <el-input-number  size="mini"  :disabled="!lr_formTableEditAuth('f_children','f_Num')" controlsPosition="default" v-model="scope.row.f_Num" :placeholder="$t('请输入')" />
                                        </template>
                                        <template v-slot:f_password="scope" >
                                            <el-input size="mini" type="password"  :disabled="!lr_formTableEditAuth('f_children','f_password')" v-model="scope.row.f_password" :placeholder="$t('请输入')" >
                                            </el-input>
                                        </template>
                                        <template v-slot:f_radio="scope" >
                                            <l-radio  :disabled="!lr_formTableEditAuth('f_children','f_radio')"  :options="f_children_f_radioOptions" v-model="scope.row.f_radio" />
                                        </template>
                                        <template v-slot:f_checkbox="scope" >
                                            <l-checkbox :disabled="!lr_formTableEditAuth('f_children','f_checkbox')"  :options="f_children_f_checkboxOptions" v-model="scope.row.f_checkbox" />
                                        </template>
                                        <template v-slot:f_select="scope" >
                                            <l-select :disabled="!lr_formTableEditAuth('f_children','f_select')"  size="mini" :options="f_children_f_selectOptions" v-model="scope.row.f_select" />
                                        </template>
                                        <template v-slot:f_select2="scope" >
                                            <l-select :disabled="!lr_formTableEditAuth('f_children','f_select2')" size="mini" :multiple="true"  :options="f_children_f_select2Options" v-model="scope.row.f_select2" />
                                        </template>
                                        <template v-slot:f_treeSelect="scope" >
                                            <l-tree-select :disabled="!lr_formTableEditAuth('f_children','f_treeSelect')"  size="mini" :options="f_children_f_treeSelectOptions" v-model="scope.row.f_treeSelect" />
                                        </template>
                                        <template v-slot:f_layerSelect="scope" >
                                            <l-layer-select 
                                              :disabled="!lr_formTableEditAuth('f_children','f_layerSelect')" 
                                              :isPage="true"
                                              :height="504"
                                              :width="960"
                                              :columns="[{'label':'第0列','prop':'f_ItemValue','valueKey':'','width':100,'align':'left','hidden':false}]"
                                              :options="f_children_f_layerSelectOptions" 
                                              v-model="scope.row.f_layerSelect"
                                              
                                            />
                                        </template>
                                        <template v-slot:f_time="scope" >
                                            <l-time size="mini"  :disabled="!lr_formTableEditAuth('f_children','f_time')" format="HH:mm:ss" :clearable="true" v-model="scope.row.f_time" :placeholder="$t('请选择')" />
                                        </template>
                                        <template v-slot:f_timerange="scope" >
                                            <l-time size="mini" isRange  :disabled="!lr_formTableEditAuth('f_children','f_timerange')" format="HH:mm:ss" :clearable="true" v-model="scope.row.f_timerange" :startPlaceholder="$t('开始时间')" :endPlaceholder="$t('结束时间')" />
                                        </template>
                                        <template v-slot:f_date="scope" >
                                            <l-date size="mini"  :disabled="!lr_formTableEditAuth('f_children','f_date')" format="yyyy-MM-dd" dateType="date" :clearable="true" v-model="scope.row.f_date" :placeholder="$t('请选择')" />
                                        </template>
                                        <template v-slot:f_dateRange="scope" >
                                            <l-date size="mini"  :disabled="!lr_formTableEditAuth('f_children','f_dateRange')" format="yyyy-MM-dd" dateType="daterange" :clearable="true" v-model="scope.row.f_dateRange" :startPlaceholder="$t('开始时间')" :endPlaceholder="$t('结束时间')" />
                                        </template>
                                        <template v-slot:f_areaSelect="scope" >
                                            <l-area-select :disabled="!lr_formTableEditAuth('f_children','f_areaSelect')" v-model="scope.row.f_areaSelect" :placeholder="$t('请选择')" />
                                        </template>
                                        <template v-slot:f_map="scope" >
                                            <l-BMap-select :height="504" :width="960" size="mini" v-model="scope.row.f_map" />
                                        </template>
                                        <template v-slot:f_company="scope" >
                                            <l-company-select :disabled="!lr_formTableEditAuth('f_children','f_company')"  size="mini" v-model="scope.row.f_company" />
                                        </template>
                                        <template v-slot:f_department="scope" >
                                            <l-department-select :disabled="!lr_formTableEditAuth('f_children','f_department')"  size="mini" v-model="scope.row.f_department" />
                                        </template>
                                        <template v-slot:f_user="scope" >
                                            <l-user-select :disabled="!lr_formTableEditAuth('f_children','f_user')"   size="mini"  v-model="scope.row.f_user" />
                                        </template>
                                        <template v-slot:f_ccompany="scope" >
                                            <l-company size="mini" v-model="scope.row.f_ccompany" />
                                        </template>
                                        <template v-slot:f_cdepartment="scope" >
                                            <l-department size="mini" v-model="scope.row.f_cdepartment" />
                                        </template>
                                        <template v-slot:f_cuser="scope" >
                                            <l-createuser size="mini" v-model="scope.row.f_cuser" />
                                        </template>
                                        <template v-slot:f_muser="scope" >
                                            <l-createtime size="mini"  v-model="scope.row.f_muser" />
                                        </template>
                                        <template v-slot:f_cdate="scope" >
                                            <l-createtime size="mini" v-model="scope.row.f_cdate" />
                                        </template>
                                        <template v-slot:f_mdate="scope" >
                                            <l-modifytime size="mini" v-model="scope.row.f_mdate" />
                                        </template>
                                        <template v-slot:f_code="scope" >
                                            <l-code size="mini" code="demo" v-model="scope.row.f_code" />
                                        </template>
                                        <template v-slot:f_icon="scope" >
                                            <l-input-icon :disabled="!lr_formTableEditAuth('f_children','f_icon')" size="mini" v-model="scope.row.f_icon" />
                                        </template>
                                        <template v-slot:f_rate="scope" >
                                            <el-rate size="mini"  :disabled="!lr_formTableEditAuth('f_children','f_rate')" :max="5" :lowThreshold="2" :highThreshold="4" voidColor="#C6D1DE" disabledVoidColor="#EFF2F7" textColor="#1F2D3D" voidIconClass="el-icon-star-off" disabledVoidIconClass="el-icon-star-on" :allowHalf="false" :showText="false" :showScore="false" :colors="['#F7BA2A','#F7BA2A','#F7BA2A']" :iconClasses="['el-icon-star-on','el-icon-star-on','el-icon-star-on']" :texts="['极差','失望','一般','满意','惊喜']" v-model="scope.row.f_rate" />
                                        </template>
                                        <template v-slot:f_switch="scope" >
                                            <el-switch size="mini"  :disabled="!lr_formTableEditAuth('f_children','f_switch')" :activeValue="true" :inactiveValue="false" v-model="scope.row.f_switch" />
                                        </template>
                                        <template v-slot:f_switch2="scope" >
                                            <el-slider size="mini"  :disabled="!lr_formTableEditAuth('f_children','f_switch2')" :min="0" :max="100" :step="1" :showStops="false" :showInput="false" :showInputControls="true" :showTooltip="true" v-model="scope.row.f_switch2" />
                                        </template>
                                        <template v-slot:f_clor="scope" >
                                            <l-input-color :disabled="!lr_formTableEditAuth('f_children','f_clor')" size="mini" v-model="scope.row.f_clor" />
                                        </template>
                                        <template v-slot:f_Id="scope" >
                                            <el-input size="mini"  :disabled="!lr_formTableEditAuth('f_children','f_Id')" v-model="scope.row.f_Id" :placeholder="$t('请输入')" >
                                            </el-input>
                                        </template>
                                    </l-edit-table>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </el-form>
    </div>
</template>
<script>
const api = window.$api.test.myTest

export default {
    data(){
        return {
            moduleCode: 'test_myTest',
            activeName: 'tab0',
            formData: {
                f_parent_f_text:"", // 单行文本
                f_parent_f_textarea:"", // 多行文本
                f_parent_f_edit:"", // 编辑器
                f_parent_f_Num:"", // 计数器
                f_parent_f_password:"", // 密码
                f_parent_f_radio:"1", // 单选框组
                f_parent_f_checkbox:"", // 多选框组
                f_parent_f_select:"", // 下拉选择
                f_parent_f_select2:"", // 下拉多选
                f_parent_f_treeSelect:"", // 树形选择
                f_parent_f_layerSelect:"", // 弹窗选择
                f_parent_f_time:"", // 时间选择
                f_parent_f_time2:"", // 时间范围
                f_parent_f_date:"", // 日期选择
                f_parent_f_daterange:"", // 日期范围
                f_parent_f_areaSelect:"", // 省市区
                f_parent_f_map:"", // 地图选择
                f_parent_f_file:"", // 文件上传
                f_parent_f_img:"", // 图片上传
                f_parent_f_company:"", // 公司选择
                f_parent_f_department:"", // 部门选择
                f_parent_f_user:"", // 人员选择
                f_parent_f_ccompany:"", // 所属公司
                f_parent_f_cdepartment:"", // 所属部门
                f_parent_f_cuser:"", // 创建人员
                f_parent_f_cdate:"", // 创建时间
                f_parent_f_muser:"", // 修改人员
                f_parent_f_mdate:"", // 修改时间
                f_parent_f_code:"", // 单据编码
                f_parent_f_Id:"", // GUID主键
                f_parent_f_icon:"", // 图标
                f_parent_f_rate:0, // 评分
                f_parent_f_swtich:"0", // 开关
                f_parent_f_swtich2:0, // 滑块
                f_parent_f_color:"", // 颜色选择

            },
            rules: {
                
            },
            f_children_columns:[
                {id:'f_children_F_text',prop:'f_text',label:'单行文本'},
                {id:'f_children_F_textarea',prop:'f_textarea',label:'多行文本'},
                {id:'f_children_F_Num',prop:'f_Num',label:'计数器'},
                {id:'f_children_F_password',prop:'f_password',label:'密码'},
                {id:'f_children_F_radio',prop:'f_radio',label:'单选框组'},
                {id:'f_children_F_checkbox',prop:'f_checkbox',label:'多选框组'},
                {id:'f_children_F_select',prop:'f_select',label:'下拉选择'},
                {id:'f_children_F_select2',prop:'f_select2',label:'下拉多选'},
                {id:'f_children_F_treeSelect',prop:'f_treeSelect',label:'树形选择'},
                {id:'f_children_F_layerSelect',prop:'f_layerSelect',label:'弹窗选择'},
                {id:'f_children_F_time',prop:'f_time',label:'时间选择'},
                {id:'f_children_F_timerange',prop:'f_timerange',label:'时间范围'},
                {id:'f_children_F_date',prop:'f_date',label:'日期选择'},
                {id:'f_children_F_dateRange',prop:'f_dateRange',label:'日期范围'},
                {id:'f_children_F_areaSelect',prop:'f_areaSelect',label:'省市区'},
                {id:'f_children_F_map',prop:'f_map',label:'地图选择'},
                {id:'f_children_F_company',prop:'f_company',label:'公司选择'},
                {id:'f_children_F_department',prop:'f_department',label:'部门选择'},
                {id:'f_children_F_user',prop:'f_user',label:'人员选择'},
                {id:'f_children_F_ccompany',prop:'f_ccompany',label:'所属公司'},
                {id:'f_children_F_cdepartment',prop:'f_cdepartment',label:'所属部门'},
                {id:'f_children_F_cuser',prop:'f_cuser',label:'创建人员'},
                {id:'f_children_F_muser',prop:'f_muser',label:'修改人员'},
                {id:'f_children_F_cdate',prop:'f_cdate',label:'创建时间'},
                {id:'f_children_F_mdate',prop:'f_mdate',label:'修改时间'},
                {id:'f_children_F_code',prop:'f_code',label:'单据编码'},
                {id:'f_children_F_icon',prop:'f_icon',label:'图标'},
                {id:'f_children_F_rate',prop:'f_rate',label:'评分'},
                {id:'f_children_F_switch',prop:'f_switch',label:'开关'},
                {id:'f_children_F_switch2',prop:'f_switch2',label:'滑块'},
                {id:'f_children_F_clor',prop:'f_clor',label:'颜色选择'},
                {id:'f_children_F_Id',prop:'f_Id',label:'单行文本'},
            ],
            f_children_data:[],

        };
    },
    computed: {
        f_parent_f_radioOptions(){
            return [{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]
        },
        f_parent_f_checkboxOptions(){
            return [{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]
        },
        f_parent_f_selectOptions(){
            const data = this.lr_DataSource('dataitem',true,this.formData.f_parent_f_radio,'f_itemvalue')
            return this.lr_DataSourceOptions(data,'f_itemvalue','f_itemname')
        },
        f_parent_f_select2Options(){
            return [{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]
        },
        f_parent_f_treeSelectOptions(){
            return [{"label":"选项一","value":"0","children":[{"label":"选项1-1","value":"11"},{"label":"选项1-2","value":"12"}]},{"label":"选项二","value":"1"},{"label":"选项三","value":"2"}]
        },
        f_parent_f_layerSelectOptions(){
            this.lr_loadDataItem('DbVersion')
            return this.lr_dataItemOptions(this.lr_dataItem['DbVersion'])
        },
        f_children_f_radioOptions(){
            return [{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]
        },
        f_children_f_checkboxOptions(){
            return [{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]
        },
        f_children_f_selectOptions(){
            return [{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]
        },
        f_children_f_select2Options(){
            return [{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]
        },
        f_children_f_treeSelectOptions(){
            return [{"label":"选项一","value":"0","children":[{"label":"选项1-1","value":"11"},{"label":"选项1-2","value":"12"}]},{"label":"选项二","value":"1"},{"label":"选项三","value":"2"}]
        },
        f_children_f_layerSelectOptions(){
            this.lr_loadDataItem('DbVersion')
            return this.lr_dataItemOptions(this.lr_dataItem['DbVersion'])
        },

    },
    methods: {
        handleF_childrenAddRow(){
            let point = {}
            point.f_text = ""
            point.f_textarea = ""
            point.f_Num = ""
            point.f_password = ""
            point.f_radio = "1"
            point.f_checkbox = ""
            point.f_select = ""
            point.f_select2 = ""
            point.f_treeSelect = ""
            point.f_layerSelect = ""
            point.f_time = ""
            point.f_timerange = ""
            point.f_date = ""
            point.f_dateRange = ""
            point.f_areaSelect = ""
            point.f_map = ""
            point.f_company = ""
            point.f_department = ""
            point.f_user = ""
            point.f_ccompany = ""
            point.f_cdepartment = ""
            point.f_cuser = "System"
            point.f_muser = "System"
            point.f_cdate = "2022-04-06 11:32:11"
            point.f_mdate = "2022-04-21 10:07:33"
            point.f_code = "learun_code_|92977a5b-a1c4-4022-a4bb-15b76330cabb"
            point.f_icon = ""
            point.f_rate = ""
            point.f_switch = "false"
            point.f_switch2 = ""
            point.f_clor = ""
            point.f_Id = ""
            this.f_children_data.push(point)
        },
        handleF_childrenDeleteRow(event){
            this.f_children_data.splice(event.index,1)
        },

        f_parent_f_radio_change(){
            this.$set(this.formData,'f_parent_f_select',undefined)
        },

        // 重置表单
        resetForm() {
            this.$formClear(this.$refs.form)
            this.activeName = 'tab0'
            this.f_children_data = []

        },
        // 校验表单
        async validateForm() {
            if (!await this.$formValidateWraper(this.$refs.form)) {
                return false  
            }
            if(!this.$refs.f_children_table.validate())
            {
                return false
            }

            return true
        },
        // 设置表单数据
        setForm(data) {
            this.$setFormData(this.formData,data.fParentEntity,'f_parent')
            this.f_children_data = data.fChildrenList

        },
        // 获取表单数据
        getForm() {
            const formData = {}
            formData.fParentEntity = this.$getFormData(this.formData,'f_parent')
            formData.fChildrenList = this.f_children_data
            return formData

        },

        async loadFormData({ keyValue/*,params,node*/ }) {//  keyValue 流程中相当于流程processId,params 传递参数,node 流程节点
            const data = await this.$awaitWraper(api.get(keyValue))
            if (data) {
                this.setForm(data)
                return true
            }
            else {
                return false
            }
        },

        async saveForm({ keyValue, isEdit/*,code,node*/ }) {// isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
            const postData = this.getForm()
            if (isEdit) {// 编辑
                return await this.$awaitWraper(api.update(keyValue, postData))
            }
            else {// 新增
                postData.fParentEntity.f_Id = keyValue

                return await this.$awaitWraper(api.add(postData))
            }
        },
    }
}
</script>